<!DOCTYPE html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Admissions Data Visualization Tool.</title>

  <!-- Project Stylesheet -->
  <link rel="stylesheet" href="public/css/app.css" />
  <!-- jQuery UI CSS styles --><!-- TODO: Incorporate into SCSS sheets. -->
  <link rel='stylesheet' href='public/css/redmond/jquery-ui-1.10.3.custom.min.css' />

  <!-- Project Javascript loaded via RequireJS -->
  <script data-main='public/main' src='public/js/vendor/require-2.1.9.min.js'></script>

</head>
<body>
    <!-- Filter elements should in here -->
    <div class='row' id='advt-filters'>
        <form id='advt-search-form' class='advt-shadow'>
            <fieldset>
                <div class='large-12 columns'>
                    <div class='row advt-collapse'>
                        <div class='large-2 columns'>
                            <div class='row'>
                                <label>Year of Entry</label>
                                <input type='number' placeholder='(e.g. 2012)' />
                            </div>
                            <div class='row'>
                                <label>Gender</label>
                                <input type='radio' name='gender' value='male' class='radio' checked/> Male
                                <input type='radio' name='gender' value='female' class='radio'/> Female
                            </div>
                            <div class='row'>
                                <label>Application Type</label>
                                <select id='advt-application-type' name='application-type'></select>
                            </div>
                        </div>
                        <div class='large-5 columns'>
                            <div class='row'>
                                <label>SAT Reading</label>
                                <div class='large-4 columns'><input id="advt-sat-read-min" type='text' data-bind="value: satReading()[0]" /></div>
                                <div class='large-4 columns'><div data-bind="slider: satReading, sliderOptions: {range: true, min:0, max:800, values: [0, 800], step: 1}"></div></div>
                                <div class='large-4 columns'><input id="advt-sat-read-max" type='text' data-bind="value: satReading()[1]" /></div>
                            </div>
                            <div class='row'>
                                <label>SAT Math</label>
                                <div class='large-4 columns'><input id="advt-sat-math-min" type='text' data-bind="value: satMath()[0]" /></div>
                                <div class='large-4 columns'><div data-bind="slider: satMath, sliderOptions: {range: true, min:0, max:800, values: [0, 800], step: 1}"></div></div>
                                <div class='large-4 columns'><input id="advt-sat-math-max" type='text' data-bind="value: satMath()[1]" /></div>
                            </div>
                            <div class='row'>
                                <label>GPA</label>
                                <div class='large-4 columns'><input id='advt-gpa-min' class='advt-gpa-input' type='text' data-bind="value: GPA()[0]" /></div>
                                <div class='large-4 columns'><div data-bind="slider: GPA, sliderOptions: {range: true, min:0, max:4, values: [0, 4], step: 0.1}"></div></div>
                                <div class='large-4 columns'><input id='advt-gpa-max' class='advt-gpa-input' type='text' data-bind="value: GPA()[1]" /></div>
                            </div>
                        </div>
                        <div class='large-3 columns'>
                            <div class='row'>
                                <label>Intended Field of Study</label>
                                <select id='advt-intended-majors' class='select' multiple></select>
                            </div>
                        </div>
                        <div class='large-2 columns advt-form-buttons'>
                            <div class='row'>
                                <input type='submit' class='advt-submit-button' value='Search' />
                            </div>
                            <div class='row'>
                                <div class='advt-export-button'>Export</div>
                            </div>
                        </div>
                    </div>
                    <div class='row advt-collapse'>
                        <div class='large-5 large-centered columns'>
                            <div class='large-5 columns'>
                                <label>City</label><input id='advt-city-input' type='text' placeholder='e.g. Portland'/>
                            </div>
                            <div class='large-2 columns'>
                                <strong>OR</strong>
                            </div>
                            <div class='large-5 columns'>
                                <label>State</label><select id='advt-state-select' class='select'></select>
                            </div>
                        </div>
                    </div>
                    <div id='advt-form-collapse' class='row'>&lt;HIDE&gt;</div>
                </div>
            </fieldset>
        </form>
    </div>

    <div class='row' id='advt-content'>

        <div class='large-7 columns advt-shadow' id='map-canvas'></div>

        <div class='large-5 columns' id='results'>
            <div class='panel advt-shadow'><p>Select a region on the map to see detailed results.</p></div>
        </div>

    </div>

    <div id='advt-loading-dialog'>
        <p>Searching... Please Wait.</p>
    </div>
    <div id='advt-export-dialog'>
        <form id='advt-export-form'>
            <div class='large-12 columns'>
                <div class='row'>
                    <input type='checkbox' id='advt-export-form-data'/> Export Data as an Excel File
                </div>
                <div class='row'>
                    <label>Excel File Save Location</label>
                    <input type='file' id='advt-export-form-data-loc' disabled />
                </div>
                <div class='row'> <hr /> </div>
                <div class='row'>
                    <input type='checkbox' id='advt-export-form-map' /> Export Map as an Image File
                </div>
                <div class='row'>
                    <label>Map Image Save Location</label>
                    <input type='file' id='advt-export-form-map-loc' disabled />
                </div>
            </div>
        </form>
    </div>
</body>
</html>
